<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="first" class="one">01</div>
    <div id="first" class="one two">02</div>
    <div class="one two">03</div>
    <div class="one two">04</div>
    <div class="one">05</div>
    <div class="one">06</div>
    <div class="one">07</div>
    <div class="one">08</div>
    <div class="one">09</div>
    <div id="last" class="one">10</div>

    <p>
        <input type="checkbox" name="hobby" value="sing">
        <input type="checkbox" name="hobby" value="dance">
        <input type="checkbox" name="hobby" value="basketball">
    </p>
</body>
<script>

    // document.getElementById("id名") 在文档中通过id名获取元素  存在=>获取的元素 不存在 => null  

    // document.getElementsByClassName("class名") 在文档中通过class名获取元素  存在=>获取的元素的集合 不存在 => []

    // document.getElementsByTagName("tag名") 在文档中通过标签名获取元素  存在=>获取的元素的集合 不存在 => []

    // document.getElementsByName("name") 在文档中通过name获取元素  存在=>获取的元素的集合 不存在 => []  (一般用于表单元素)

    // var first = document.getElementById("first");
    // console.log(first);

    // var oneList = document.getElementsByClassName("one");
    // console.log(oneList);

    // var first = oneList[0];
    // console.log(first);

    // var twoList = document.getElementsByClassName("two");
    // console.log(twoList);

    // var divList = document.getElementsByTagName("div");
    // console.log(divList);


    var hobbyList = document.getElementsByName("hobby");
    console.log(hobbyList);


</script>

</html>